<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
	<meta charset="utf-8">
	<title>星巴克天猫旗舰店</title>
	<link rel="stylesheet" type="text/css" href="./css/public.css">
	<link rel="stylesheet" type="text/css" href="./css/icon-font/iconfont.css">
	<link rel="stylesheet" type="text/css" href="./css/tianmao.css">
</head>
<body>
	<div class="bg">
		<div class="head">
			<div class="head-top">
				<div class="head-t-left iconfont icon-fanhui"><a href="index.html"></a></div>
				<div class="head-t-middle">
					<input type="text" name="" placeholder="双12狂欢购">
					<span class="iconfont icon-sousuo"></span>
				</div>
				<div class="head-t-right">
					<div class="items iconfont icon-leimupinleifenleileibie" id="momo"></div>
					<div class="more iconfont icon-gengduo"></div>
				</div>
			</div>
			<div class="head-bottom">
				<div class="nav-list">首页</div>
				<div class="nav-list">全部宝贝</div>
				<div class="nav-list">新品</div>
				<div class="nav-list">动态</div>
			</div>
		</div>
		<div class="body" id="getbody">
			<div class="photocase">
				<div class="run">
					<img class="pic1" src="./img/pic1.jpg">
					<img class="pic2" src="./img/pic2.jpg">
					<img class="pic3" src="./img/pic3.jpg">
					<img class="pic4" src="./img/pic4.jpg">
				</div>
			</div>
			<div class="timebox">
				<h3>12月5日18:00-20:00</h3>
				<p>9大平台同步直播星巴克臻选烘培工坊开幕盛典</p>
				<p>一场全球咖啡爱好者的狂欢等你加入</p>
			</div>
			<div class="goods">
				<div  class="good-items">
					<img src="https://img.alicdn.com/bao/uploaded/i1/2634283647/TB1.eMxfC_I8KJjy0FoXXaFnVXa_!!0-item_pic.jpg_240x240.jpg">
					<p class="goodsname">￥588.00<a href="">星巴克臻选 烘焙工坊开业纪念款 2017圣诞专享咖啡豆</a></p>
				</div>

				<div  class="good-items">
					<img src="https://img.alicdn.com/bao/uploaded/i4/2634283647/TB1cYQOfv6H8KJjSspmXXb2WXXa_!!0-item_pic.jpg_240x240.jpg">
					<p class="goodsname">￥588.00<a href="">星巴克臻选 烘焙工坊开业纪念款 肯亚 卡林加咖啡豆</a></p>
				</div>

				<div  class="good-items">
					<img src="https://img.alicdn.com/bao/uploaded/i4/2634283647/TB1IkwrfsnI8KJjSspeXXcwIpXa_!!0-item_pic.jpg_240x240.jpg">
					<p class="goodsname">￥588.00<a href="">星巴克臻选 烘焙工坊开业纪念款 危地马拉 罗莎莉欧咖啡豆</a></p>
				</div>

				<div  class="good-items">
					<img src="https://img.alicdn.com/bao/uploaded/i1/2634283647/TB1OOIHfvDH8KJjy1XcXXcpdXXa_!!0-item_pic.jpg_240x240.jpg">
					<p class="goodsname">￥588.00<a href="">星巴克臻选 烘焙工坊开业纪念款 萨尔瓦多 圣马塞利诺农场咖啡豆</a></p>
				</div>

				<div  class="good-items">
					<img src="https://img.alicdn.com/bao/uploaded/i4/2634283647/TB1p0jja7fb_uJkSndVXXaBkpXa_!!0-item_pic.jpg_240x240.jpg">
					<p class="goodsname">￥269.00<a href="">星巴克 上海烘焙工坊 12oz路牌 马克杯</a></p>
				</div>

				<div  class="good-items">
					<img src="https://img.alicdn.com/bao/uploaded/i3/TB1GH22OVXXXXcCXFXXXXXXXXXX_!!0-item_pic.jpg_240x240.jpg">
					<p class="goodsname">￥99.00<a href="">星巴克 五彩云南 纪念款星享卡 天猫精选款</a></p>
				</div>
			</div>
			<!--所有隐藏的内容-->
			<div class="morelist" id="more-list">
				<ul>
					<li><span>咖啡</span><span>饮品</span><span>咖啡用具</span><span>冰淇淋</span></li>
					<li><span>奶茶</span><span>小吃</span><span>美食</span><span>艺术品</span></li>
					<li><span>周边</span><span>藏品</span><span>购物袋</span><span>艺术</span></li>
					<li><span>关于我们</span><span>推荐</span><span>12.12</span><span>hot</span></li>
				</ul>
			</div>
		</div>
		<div class="foot" id="foot">
			<div class="foot-left">
				<div class="shopnav-items">宝贝分类</div>
				<div class="shopnav-items">烘培工坊</div>
				<div class="shopnav-items"><span>关于我们</span></div>
			</div>
			<div class="foot-right iconfont icon-wangwang"></div>
		</div>
	</div>
	
	<script type="text/javascript">
		var mouse = document.getElementById('getbody').scrollTop;
		var foot = document.getElementById('foot');
		document.getElementById('getbody').onwheel = function mov (){
			if (document.getElementById('getbody').scrollTop > mouse) {
				mouse = document.getElementById('getbody').scrollTop;
				foot.classList.add('showed')
			}
			else if (document.getElementById('getbody').scrollTop < mouse){
				mouse = document.getElementById('getbody').scrollTop;
				foot.classList.remove('showed');
				
			}
		}

		var more = document.getElementById('momo');
		var morelist = document.getElementById('more-list');
		more.onclick = function showe () {
			console.log('有效');
			morelist.classList.toggle('chuxian');
			more.classList.toggle('change');
		}
	</script>	
</body>
</html>